<template>
	<view>
		<view class="sheet-popup" :class="[show ? 'sheet-popup-show' : '']" :style="{'border-radius': `${borderRadius}rpx ${borderRadius}rpx 0rpx 0rpx`}">
			<slot></slot>
		</view>
		<view class="popup-mask" :class="[show ? 'popup-mask-show' : '']" @click="closePopup"></view>
	</view>
</template>
 
<script>
	export default {
		name:"popup",
		props:{
			// 显示状态
			show: {
				type: Boolean,
				default: false
			},
			// 显示弹窗的圆角
			borderRadius: {
				type: [Number, String],
				default: 0
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			closePopup() {
				this.$emit('close')
			}
		}
	}
</script>
 
<style>
	.sheet-popup{
		width: 100%;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		/* #ifdef H5 */
		bottom: 0px;
		/* #endif */
		z-index: 9998;
		visibility: hidden;
		transform: translate3d(0, 100%, 0);
		transform-origin: center;
		transition: all 0.2s ease-in-out;
		overflow: hidden;
		max-width: 500px;
		margin: 0 auto;
	}
	.sheet-popup-show {
		transform: translate3d(0, 0, 0);
		visibility: visible;
	}
	.popup-mask{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9996;
		background: rgba(0,0,0,0.5);
		max-width: 500px;
		margin: 0 auto;
		transition: all 0.2s ease-in-out;
		opacity: 0;
		visibility: hidden;
	}
	.popup-mask-show {
		opacity: 1;
		visibility: visible;
	}
</style>